<template>
    <view class="smart-actions">
        <view class="action-grid">
            <view class="action-item" @click="smartAppointment">
                <view class="action-icon">
                    <text class="iconfont icon-calendar"></text>
                </view>
                <text class="action-text">智能预约</text>
            </view>

            <view class="action-item" @click="viewAppointments">
                <view class="action-icon">
                    <text class="iconfont icon-list"></text>
                </view>
                <text class="action-text">我的预约</text>
            </view>

            <view class="action-item" @click="recommendMedicine">
                <view class="action-icon">
                    <text class="iconfont icon-medicine"></text>
                </view>
                <text class="action-text">用药建议</text>
            </view>

            <view class="action-item" @click="cancelAppointment">
                <view class="action-icon">
                    <text class="iconfont icon-cancel"></text>
                </view>
                <text class="action-text">取消预约</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        userId: {
            type: [String, Number],
            default: 'user_001'
        }
    },
    methods: {
        async smartAppointment() {
            // 触发智能预约流程
            this.$emit('smart-action', {
                type: 'smart-appointment',
                message: '我想预约挂号，请帮我匹配合适的科室和医生'
            });
        },

        async viewAppointments() {
            // 查看预约记录
            this.$emit('smart-action', {
                type: 'view-appointments',
                message: '请显示我的预约记录'
            });
        },

        async recommendMedicine() {
            // 推荐用药
            this.$emit('smart-action', {
                type: 'recommend-medicine',
                message: '请根据我的症状推荐一些药物'
            });
        },

        async cancelAppointment() {
            try {
                const res = await new Promise((resolve, reject) => {
                    uni.request({
                        url: 'http://127.0.0.1:4545/ai-doctor/cancel',
                        method: 'POST',
                        data: {
                            userId: this.userId
                        },
                        header: {
                            'Content-Type': 'application/json'
                        },
                        success: (response) => {
                            if (response.statusCode === 200) {
                                resolve(response.data);
                            } else {
                                reject(response);
                            }
                        },
                        fail: (err) => {
                            reject(err);
                        }
                    });
                });

                if (res.code === 200) {
                    this.$emit('smart-action', {
                        type: 'cancel-appointment',
                        message: res.data
                    });
                } else {
                    uni.showToast({
                        title: '获取预约信息失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('取消预约失败', error);
                uni.showToast({
                    title: '操作失败',
                    icon: 'none'
                });
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.smart-actions {
    background: white;
    margin: 20rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 20rpx;
    border-radius: 15rpx;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.95);
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    }
}

.action-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15rpx;

    .iconfont {
        font-size: 40rpx;
        color: white;
    }
}

.action-text {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}
</style>
